<template>
  <div style="border: 1px solid red; padding: 10px 20px">
    <!-- <div>{{ user.name }},, {{ user.age }}</div> -->
    <div>{{ name }},, {{ age }}</div>
    <button @click="updateAge">修改age</button>
  </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue';

// const user = reactive({ name: '鲁班', age: 500 });
// let { name, age } = reactive({ name: '鲁班', age: 500 });
let user = reactive({ name: '鲁班', age: 500 });
// toRefs 会自动给解构的所有变量，自动添加一个 ref 包裹一下 ------ 解决响应式丢失问题
let { name, age } = toRefs(user);

const updateAge = () => {
  age.value++;
  console.log(age.value);
};
</script>
